import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  FlatList,
  Image,
  ScrollView,
} from 'react-native';
import BaseUrl from '../../config/BaseUrl';
import {getNewsList, listByClassif, custList} from '../../service/home';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
import Banner from '../../components/Banner';

const navList = [
  [
    {
      name: '报名',
      url: require('../../assets/images/home/home_nav1.png'),
      id: 0,
      // route: 'ApplyList', // 报名详情
      route: 'Apply',
    },
    {
      name: '知识库',
      url: require('../../assets/images/home/home_nav2.png'),
      id: 1,
      route: 'OnLineCouse',
    },
    {
      name: '题库',
      url: require('../../assets/images/home/home_nav3.png'),
      id: 2,
      route: 'QuestionManage',
    },
    {
      name: '模拟训练',
      url: require('../../assets/images/home/home_nav4.png'),
      id: 3,
      route: 'Simulation',
    },
  ],
  [
    {
      name: '考试',
      url: require('../../assets/images/home/home_nav5.png'),
      id: 4,
      route: 'ExamList',
    },
    {
      name: 'TB咨询',
      url: require('../../assets/images/home/home_nav6.png'),
      id: 5,
      route: 'TBConsult',
    },
    {
      name: '明星老师',
      url: require('../../assets/images/home/home_nav7.png'),
      id: 6,
      route: 'StarTeacher',
    },
    {
      name: '成绩查询',
      url: require('../../assets/images/home/home_nav8.png'),
      id: 7,
      route: 'MyScore',
    },
  ],
];

const Home = () => {
  const navigation = useNavigation();
  const [newList, setNewList] = useState([]);
  const [classList, setClassList] = useState([]);
  const [teacherList, setTeacherList] = useState([]);
  useEffect(() => {
    getNewsList({artType: ''}).then((res) => {
      // console.log(res);
      setNewList(res.rows);
    });

    // 推荐课程
    listByClassif({ps: 6, teacherId: '', courseClassif: ''}).then((res) => {
      console.log(res);
      setClassList(res.rows);
    });

    // 明星老师
    custList({custType: 'T'}).then((res) => {
      console.log(res);
      setTeacherList(res.rows);
    });
  }, []);

  const HeadComponent = (props) => (
    <View style={styles.content_head}>
      <View style={styles.head_left}>
        <View style={styles.title_line} />
        <Text style={styles.head_title}>{props.name}</Text>
      </View>
      <TouchableOpacity
        activeOpacity={1}
        style={styles.head_more}
        onPress={() => navigation.push(props.path)}>
        <Text style={styles.more_text}>更多</Text>
        <Image
          style={styles.right_icon}
          source={require('../../assets/images/home/back_right.png')}
        />
      </TouchableOpacity>
    </View>
  );
  return (
    <AreaView>
      <ScrollView showsVerticalScrollIndicator={false} style={styles.container}>
        <View style={styles.gap} />
        <View style={styles.nav_container}>
          <TouchableOpacity
            activeOpacity={1}
            onPress={() => navigation.push('LabelList')}>
            <Image
              style={styles.nav}
              source={require('../../assets/images/home/nav1.png')}
            />
          </TouchableOpacity>
          <TouchableOpacity
            activeOpacity={1}
            onPress={() => navigation.push('Reading')}>
            <Image
              style={styles.nav}
              source={require('../../assets/images/home/nav2.png')}
            />
          </TouchableOpacity>
          <TouchableOpacity
            activeOpacity={1}
            onPress={() => navigation.push('CouseMall')}>
            <Image
              style={styles.nav}
              source={require('../../assets/images/home/nav3.png')}
            />
          </TouchableOpacity>
        </View>
        {/* <View style={styles.notice}>
          <View style={styles.notic_title}>
            <Image
              style={styles.notice_icon}
              source={require('../../assets/images/home/motice.png')}
            />
            <Text style={styles.notic_text}>公告</Text>
          </View>
          <View style={styles.line} />
          <View style={styles.notic_info}>
            <Image
              style={styles.notice_new}
              source={require('../../assets/images/home/new.png')}
            />
            <Text numberOfLines={1} style={styles.notic_info_text}>
              掌引TB学院第十八期培训将开始
            </Text>
          </View>
        </View> */}
        <View>
          {(navList || []).map((item, i) => (
            <View key={i} style={styles.home_nav_container}>
              {(item || []).map((s) => (
                <TouchableOpacity
                  style={styles.nav_btn}
                  onPress={() => s.route && navigation.push(s.route)}
                  activeOpacity={1}
                  key={s.id}>
                  <Image style={styles.nav_icon} source={s.url} />
                  <Text style={styles.nav_title}>{s.name}</Text>
                </TouchableOpacity>
              ))}
            </View>
          ))}
        </View>
        <View style={styles.wrapper_container}>
          <Banner />
        </View>
        <View style={styles.gap} />
        {/* <View>
          <HeadComponent name="热门直播" />
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            style={styles.live_container}>
            {[1, 2, 3, 4, 5, 6].map((item) => (
              <TouchableOpacity  activeOpacity={1} key={item} style={styles.live_list}>
                <View>
                  <Image style={styles.live_cover} />
                  <Image
                    style={styles.start}
                    source={require('../../assets/images/video_stop.png')}
                  />
                </View>
                <Text style={styles.live_text} numberOfLines={2}>
                  文字描述文字描述文字描述文字描述文文字描述文字描述文字描述文字描述文
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
        <View style={styles.gap} /> */}
        <View>
          <HeadComponent name="最新资讯" path="NewsList" />
          <View style={styles.new_container}>
            {(newList.slice(0, 6) || []).map((item) => (
              <TouchableOpacity
                activeOpacity={1}
                key={item?.artId}
                style={styles.new_list_one_img}
                onPress={() =>
                  navigation.push('NewsDetail', {
                    artId: item?.artId,
                  })
                }>
                <Image
                  style={styles.new_cover}
                  source={{uri: BaseUrl.imgurl + item?.coveImage}}
                />
                <View style={styles.new_info}>
                  <Text numberOfLines={2} style={styles.new_title}>
                    {item?.artDesc}
                  </Text>
                  <Text style={styles.new_time}>{item?.createTime}</Text>
                </View>
              </TouchableOpacity>
            ))}

            {/* <TouchableOpacity
              style={styles.new_list_more_img}
              onPress={() => navigation.push('NewsDetail')}>
              <Text numberOfLines={2} style={styles.new_title}>
                大卫·霍克尼成为最贵艺术家，艺术家和拍卖行到底是什么关系大卫·霍克尼成为最贵艺术家，艺术家和拍卖行到底是什么关系大卫·霍克尼成为最贵艺术家，艺术家和拍卖行到底是什么关系
              </Text>
              <View style={styles.more_img_container}>
                <Image style={styles.new_cover} />
                <Image style={styles.new_cover} />
                <Image style={styles.new_cover} />
              </View>
              <Text style={styles.new_time}>2021-03-26 11：53：21</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.new_list_one_img}
              onPress={() => navigation.push('NewsDetail')}>
              <View style={styles.new_info_no_img}>
                <Text numberOfLines={2} style={styles.new_title}>
                  大卫·霍克尼成为最贵艺术家，艺术家和拍卖行到底是什么关系
                </Text>
                <Text style={styles.new_time_no_img}>
                  2021-03-26 11：53：21
                </Text>
              </View>
            </TouchableOpacity> */}
          </View>
        </View>
        <View style={styles.gap} />
        <View>
          <HeadComponent name="推荐课程" path="CouseMall" />
          <View style={styles.couse_container}>
            {(classList || []).map((item) => (
              <TouchableOpacity
                activeOpacity={1}
                style={styles.couse_list}
                key={item.courseId}
                onPress={() =>
                  navigation.push('CouseDetail', {
                    courseId: item.courseId,
                  })
                }>
                <View>
                  <Image
                    style={styles.couse_cover}
                    source={{uri: BaseUrl.imgurl + item?.courseImage}}
                  />
                  {item?.freeCourse === 'Y' && (
                    <View style={styles.couse_tag}>
                      <Text style={styles.tag_text}>免费</Text>
                    </View>
                  )}
                </View>
                <Text style={styles.couse_text} numberOfLines={2}>
                  {item.courseIntr}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
        <View style={styles.gap} />
        <View>
          <HeadComponent name="明星老师" path="StarTeacher" />
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            style={styles.live_container}>
            {(teacherList || []).map((item) => (
              <TouchableOpacity
                activeOpacity={1}
                key={item.custId}
                style={styles.live_list}
                onPress={() => {
                  navigation.push('StarTeacherDetail', {
                    custId: item.custId,
                  });
                }}>
                <View>
                  <Image
                    style={styles.live_cover}
                    source={{uri: BaseUrl.imgurl + item?.image}}
                  />
                </View>
                <Text style={styles.teacher_name}>{item?.nickName}</Text>
                <Text style={styles.live_text} numberOfLines={2}>
                  {/* {item?.custDesc} */}
                  {item?.custDesc?.replace(/<\/?.+?\/?>/g, '')}
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
      </ScrollView>
    </AreaView>
  );
};

export default Home;
